<style lang="scss" scoped>
:deep .el-drawer__header {
  text-align: center;
}
.pdf {
  iframe {
    width: 100%;
    height: 75vh;
  }

  :deep .list {
    width: 400px;
    padding-left: 20px;
    color: $color-yellow;

    li {
      margin-top: 10px;
    }

    .el-form {
      .el-input {
        width: 180px;
      }
    }
  }
}
</style>
<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    custom-class="upload-dialog"
    @close="$emit('close')"
    size="90%"
    destroy-on-close
  >
    <div class="pdf">
      <el-row type="flex" justify="space-between">
        <div class="list">
          <slot :clickFn="onencode">
            <ul>
              <li @click="onencode('/20220730152319422347.pdf')">
                发票(01).pdf (156.384KB)
              </li>
              <li>装箱单(02).pdf (156.797KB)</li>
            </ul>
          </slot>
        </div>
        <iframe :src="fileUrl" frameborder="0" ref="iframe"></iframe>
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'PdfCom',
  data() {
    return {
      loadedRatio: 0,
      page: 1,
      numPages: 0,
      rotate: 0,
      fileUrl: `/pdfjs/web/viewer.html?file=${encodeURIComponent(this.src)}`
    }
  },
  props: {
    src: String,
    title: String,
    visibleProp: Boolean,
    isUpload: Boolean
  },
  computed: {
    visible: {
      get() {
        return this.visibleProp
      },
      set() {}
    }
  },
  methods: {
    onencode(url) {
      this.fileUrl = `/pdfjs/web/viewer.html?file=${encodeURIComponent(url)}`
    }
  },
  created() {
    this.onencode(this.src)
  }
}
</script>
